<script setup>
import { useWebSocketStore } from '@/store/modules/socket'
import { Message } from '@arco-design/web-vue';
const inputMsg = ref('')
const pointCount = ref(null);
const timer = ref(null);

const webSocketStore = useWebSocketStore();

const ws = webSocketStore.getWs;
const status = computed(() => webSocketStore.getStatus);

const messageList = ref([])

nextTick(() => {
  ws.onmessage = (event) => {
    const { data } = event;
    if(data === 'pong'){
      return;
    }
    const obj = {
      msg: event.data,
      mine: false,
    }
    messageList.value.push(obj)
  }
})

const sendMessage = () => {
  if(inputMsg.value === ''){
    Message.warning('请勿发送空内容')
    return;
  }
  const msg = {
    type: 1,
    toId: "2",
    msg: inputMsg.value
  }
  messageList.value.push({
    ...msg,
    mine: true
  })
  webSocketStore.send(JSON.stringify(msg));
  inputMsg.value = ''
}

const inputIng = () => {
  timer.value = setInterval(() => {
    if(pointCount.value === 3){
      pointCount.value = 0;
    }else{
      pointCount.value++
    }
  }, 500)
}

const stopInput = () => {
  clearInterval(timer.value)
  timer.value = null;
  pointCount.value = null;
}

inputIng();
setTimeout(() => {
  stopInput();
}, 5000);
</script>

<template>
  <page-wrapper>
    <div class="chat-wrapper">
      <div class="chat-header">
        <a-badge :status="status === 'OPEN' ? 'success':'normal'" class="mr-2" />
        <template v-if="pointCount !== null">客服正在输入中</template>
        <template v-else>客服小蜜~</template>
        <template v-for="i in pointCount">.</template>
      </div>
      <div class="chat-messages">
        <template v-for="msg in messageList">
          <div class="chat-message left" v-if="!msg.mine">
            <a-avatar>
              <img src="https://z3.ax1x.com/2021/09/23/4dPc8O.png" />
            </a-avatar>
            <div class="message">{{msg.msg}}</div>
          </div>
          <div class="chat-message right" v-else>
            <div class="message">{{msg.msg}}</div>
            <a-avatar>
              <img src="https://s1.ax1x.com/2023/07/06/pC6Zx4H.jpg" />
            </a-avatar>
          </div>
        </template>
      </div>
      <div class="chat-input">
        <a-mention v-model="inputMsg" :data="['Bytedance', 'Bytedesign', 'Bytenumner']" type="textarea"
        :auto-size="{minRows: 6, maxRows: 6}" />
        <div class="flex justify-end">
          <a-button class="mt-2 mr-4" @click="sendMessage">发送</a-button>
        </div>
      </div>
    </div>
  </page-wrapper>
</template>

<style lang="less" scoped>
.chat-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-neutral-3);
  border-right: 1px solid var(--color-neutral-3);

  .chat-header {
    height: 40px;
    background-color: var(--color-neutral-2);
    font-size: 16px;
    line-height: 40px;
    padding-left: 12px;
  }

  .chat-messages {
    flex: 1;
    border-top: 1px solid var(--color-neutral-3);
    border-bottom: 1px solid var(--color-neutral-3);
    padding: 10px;

    .chat-message{
      margin-top: 10px;
      display: flex;
      flex-direction: row;

      .message{
        background: var(--color-neutral-3);
        padding: 0 8px;
        display: flex;
        align-items: center;
      }

      &.left {
        .message{
          margin-left: 10px;
          border-radius: 10px 10px 10px 0;
          background-color: rgb(var(--green-3));
        }
      }

      &.right{
        justify-content: end;
        .message{
          margin-right: 10px;
          border-radius: 10px 10px 0 10px;
        }
      }
    }
  }

  .chat-input {
    height: 200px;
  }
}</style>